<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				width:600px ;
				border-collapse: collapse;
				margin: auto;
				
			}
			tr,th{
				border:1px solid ;
			}
			tr,td{
				border:1px solid ;
			}
		</style>
	</head>
	<body>
		<table id="myt">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>kky1</td>
					<td>15</td>
					<td>男</td>
					<td>哇</td>
					
					<td>
						<button type="button" class="up">上移</button>
						<button type="button" class="shan" onclick="deleteRow(this)">删除</button>
						<button type="button" class="down">下移</button>
					</td>
				</tr>
				<tr>
					<td>2</td>
					<td>kky1</td>
					<td>15</td>
					<td>男</td>
					<td>哇</td>
					
					<td>
						<button type="button" class="up">上移</button>
						<button type="button" class="shan" onclick="deleteRow(this)">删除</button>
						<button type="button" class="down">下移</button>
					</td>
				</tr>
				<tr>
					<td>3</td>
					<td>kky1</td>
					<td>15</td>
					<td>男</td>
					<td>哇</td>
					
					<td>
						<button type="button" class="up">上移</button>
						<button type="button" class="shan" onclick="deleteRow(this)">删除</button>
						<button type="button" class="down">下移</button>
					</td>
				</tr>
				<tr>
					<td>4</td>
					<td>kky1</td>
					<td>15</td>
					<td>男</td>
					<td>哇</td>
					
					<td>
						<button type="button" class="up">上移</button>
						<button type="button" class="shan" onclick="deleteRow(this)">删除</button>
						<button type="button" class="down">下移</button>
					</td>
				</tr>
				<tr>
					<td>5</td>
					<td>kky1</td>
					<td>15</td>
					<td>男</td>
					<td>哇</td>
					
					<td>
						<button type="button" class="up">上移</button>
						<button type="button" class="shan" onclick="deleteRow(this)">删除</button>
						<button type="button" class="down">下移</button>
					</td>
				</tr>
			<tbody>
		</table>
		<script>
			function up(obj){
				var up=document.getElementsByClassName("up")[0];
				var tr=obj.parentNode.parentNode;
				var tbody=tr.parentNode;
				var rowIdx=0;
				for(var i=0;i<tbody.rows.length;i++){
					if(tbody.rows[i]==tr){
						rowIdx=i;
						break;
					}
				}
				if(rowIdx==0){
					return up.disabled=true;
				}
			    var preTr=tbody.rows[rowIdx-1];
			    var nextTr=tr.nextSibling;
			    tbody.removeChild(preTr);
			   if(nextTr){
			   	tbody.insertBefore(preTr,nextTr);
			   }else{
			   	tbody.appendChild(perTr);                                                              
			    }
			   }
			function down(obj){
				var down=document.getElementsByClassName("down")[0];
				var tr=obj.parentNode.parentNode;
				var tbody=tr.parentNode;
				var rowIdx=0;
				for(var i=0;i<tbody.rows.length;i++){
					if(tbody.rows[i]==tr){
						rowIdx=i;
						break;
					}
				}	
					if(rowIdx==tbody.rows.length-1){
					 return down.disabled=true;
					}
				    var nexTr=tbody.rows[rowIdx+1];
			        var nextSin=nexTr.nextSibling;
			        tbody.removeChild(tr);
			        if(nextSin){
				   	tbody.insertBefore(tr,nextSin);
				   }else{
				   	tbody.appendChild(tr);                                                              
				    }
				}
			window.onload=function(){
				Array.from(document.querySelectorAll(".up")).forEach((el,i)=>{
					el.onclick=function(){
						up(this);
					}
				},false);
				Array.from(document.querySelectorAll(".down")).forEach((el,i)=>{
					el.onclick=function(){
						down(this);
					}
				},false);
			}
			function deleteRow(r){
				var i=r.parentNode.parentNode.rowIndex;
				document.getElementById("myt").deleteRow(i);
			}
		</script>
	</tbody>
</html>
